<template>
	<view class="home-container">
		<!-- 增强版顶部渐变背景 -->
		<view class="top-gradient-bg">
			<view class="bg-shape bg-shape-1"></view>
			<view class="bg-shape bg-shape-2"></view>
			<view class="bg-shape bg-shape-3"></view>
			<view class="bg-shape bg-shape-4"></view>
			<view class="bg-shape bg-shape-5"></view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :autoplay="true" :interval="3000" :duration="500" circular indicator-dots
				indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="banner-item" @click="onBannerClick(index)">
						<image class="banner-image" :src="item.image" mode="aspectFill" @error="onBannerError(index)"
							@load="onBannerLoad(index)" />
						<view class="banner-overlay"></view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 快捷导航 -->
		<view class="quick-nav-section">
			<view class="section-header">
				<view class="title-with-line">
					<view class="title-line"></view>
					<text class="section-title">快捷功能</text>
				</view>
				<text class="section-subtitle">快速访问常用功能</text>
			</view>
			<view class="nav-grid">
				<view class="nav-item" @click="navigateToGoodsSearch" @touchstart="onNavTouchStart"
					@touchend="onNavTouchEnd">
					<view class="nav-icon-container">
						<image class="nav-icon" :src="getNavIcon('商品查询')" mode="aspectFit"
							@error="onNavIconError('商品查询')" />
						<view class="nav-icon-bg"></view>
						<view class="nav-icon-hover"></view>
					</view>
					<text class="nav-text">商品查询</text>
				</view>
				<view class="nav-item" @click="navigateToOrderManagement" @touchstart="onNavTouchStart"
					@touchend="onNavTouchEnd">
					<view class="nav-icon-container">
						<image class="nav-icon" :src="getNavIcon('订单管理')" mode="aspectFit"
							@error="onNavIconError('订单管理')" />
						<view class="nav-icon-bg"></view>
						<view class="nav-icon-hover"></view>
					</view>
					<text class="nav-text">订单管理</text>
				</view>
				<view class="nav-item" @click="navigateToFavorites" @touchstart="onNavTouchStart"
					@touchend="onNavTouchEnd">
					<view class="nav-icon-container">
						<image class="nav-icon" :src="getNavIcon('收藏管理')" mode="aspectFit"
							@error="onNavIconError('收藏管理')" />
						<view class="nav-icon-bg"></view>
						<view class="nav-icon-hover"></view>
					</view>
					<text class="nav-text">收藏管理</text>
				</view>
			</view>
		</view>

		<!-- 热门商品 -->
		<view class="hot-goods-section">
			<view class="section-header">
				<view class="title-group">
					<view class="title-with-line">
						<view class="title-line"></view>
						<text class="section-title">热门商品</text>
					</view>
					<text class="section-subtitle">发现最受欢迎的商品</text>
				</view>
				<view class="sort-options">
					<text class="sort-option" :class="{ active: sortBy === 'sell_num' }"
						@click="changeSort('sell_num')">
						销量
					</text>
					<text class="sort-option" :class="{ active: sortBy === 'review_rate' }"
						@click="changeSort('review_rate')">
						好评率
					</text>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-state" v-if="loading && hotGoods.length === 0">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载商品...</text>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list" v-if="hotGoods.length > 0">
				<view class="goods-item" v-for="item in hotGoods" :key="item.good_id"
					@click="viewGoodsDetail(item.good_id)" @touchstart="onGoodsTouchStart" @touchend="onGoodsTouchEnd">
					<view class="goods-image-container">
						<image class="goods-image" :src="getGoodsImage(item)" mode="aspectFill"
							@error="onGoodsImageError(item)" @load="onGoodsImageLoad(item)" />
						<view class="goods-image-overlay"></view>
						<view class="goods-tag" v-if="item.good_sell_num > 1000">
							<text class="tag-text">热销</text>
							<view class="tag-pulse"></view>
						</view>
						<view class="goods-hover-effect"></view>
					</view>
					<view class="goods-info">
						<text class="goods-name">{{ item.good_name || '未知商品' }}</text>
						<view class="price-section">
							<text class="goods-price">¥{{ item.good_sell_price || '0.00' }}</text>
							<text class="original-price" v-if="item.good_price > item.good_sell_price">
								¥{{ item.good_price }}
							</text>
						</view>
						<view class="goods-stats">
							<view class="stat-item">
								<view class="stat-icon-wrapper">
									<text class="stat-icon">📦</text>
								</view>
								<text class="sales">销量: {{ formatSales(item.good_sell_num) }}</text>
							</view>
							<view class="stat-item">
								<view class="stat-icon-wrapper">
									<text class="stat-icon">⭐</text>
								</view>
								<text class="rating">好评: {{ getReviewRate(item) }}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && hotGoods.length === 0">
				<view class="empty-icon">🛍️</view>
				<text class="empty-text">暂无商品数据</text>
				<text class="empty-subtext">快去添加一些商品吧</text>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore && hotGoods.length > 0" @click="loadMoreGoods">
				<view class="load-more-content">
					<text class="load-more-text">{{ loading ? '加载中...' : '加载更多' }}</text>
					<view class="load-more-icon">↓</view>
				</view>
			</view>
		</view>

		<!-- 底部安全区域 -->
		<view class="bottom-safe-area"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [{
						image: '/static/banners/banner1.png'
					},
					{
						image: '/static/banners/banner2.png'
					},
					{
						image: '/static/banners/banner3.png'
					},
					{
						image: '/static/banners/banner4.png'
					},
					{
						image: '/static/banners/banner5.png'
					},
				],
				hotGoods: [],
				sortBy: 'sell_num',
				page: 1,
				pageSize: 6,
				hasMore: true,
				loading: false,
				// 导航图标缓存
				navIcons: {}
			}
		},
		onLoad() {
			this.loadHotGoods()
		},
		onPullDownRefresh() {
			this.page = 1
			this.hasMore = true
			this.loadHotGoods().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			// 获取导航图标路径
			getNavIcon(navName) {
				if (this.navIcons[navName]) {
					return this.navIcons[navName]
				}

				const iconPath = `/static/icons/${navName}.png`
				this.navIcons[navName] = iconPath
				return iconPath
			},

			// 导航图标加载错误处理
			onNavIconError(navName) {
				console.log(`导航图标加载失败: ${navName}`)
				this.navIcons[navName] = '/static/icons/default-icon.png'
				this.$forceUpdate()
			},

			// 导航触摸效果
			onNavTouchStart(e) {
				const item = e.currentTarget
				item.style.transform = 'scale(0.95)'
			},

			onNavTouchEnd(e) {
				const item = e.currentTarget
				item.style.transform = 'scale(1)'
			},

			// 商品触摸效果
			onGoodsTouchStart(e) {
				const item = e.currentTarget
				item.style.transform = 'translateY(-8rpx)'
			},

			onGoodsTouchEnd(e) {
				const item = e.currentTarget
				item.style.transform = 'translateY(0)'
			},

			// 图片加载成功处理
			onBannerLoad(index) {
				console.log(`Banner ${index} loaded successfully`)
			},

			onGoodsImageLoad(item) {
				console.log(`Goods image loaded: ${item.good_name}`)
			},

			// 轮播图点击
			onBannerClick(index) {
				uni.showToast({
					title: `点击了Banner ${index + 1}`,
					icon: 'none'
				})
			},

			async loadHotGoods() {
				if (this.loading) return

				this.loading = true
				try {
					const [error, response] = await new Promise((resolve) => {
						uni.request({
							url: 'http://localhost:8000/api/v1/goods/',
							method: 'GET',
							data: {
								page: this.page,
								page_size: this.pageSize,
								sort_by: this.sortBy,
								order: 'desc'
							},
							timeout: 10000,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => resolve([null, res]),
							fail: (err) => resolve([err, null])
						})
					})

					if (error) {
						console.error('请求失败:', error)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
						return
					}

					if (response && response.statusCode === 200) {
						const data = response.data
						const goodsList = data.goods || data.items || data.data || []

						const goodsWithImages = goodsList.map(item => {
							return {
								...item,
								computedImage: this.getGoodsImagePath(item.good_name)
							}
						})

						if (this.page === 1) {
							this.hotGoods = goodsWithImages
						} else {
							this.hotGoods = [...this.hotGoods, ...goodsWithImages]
						}

						const pagination = data.pagination || {}
						this.hasMore = this.page < (pagination.pages || pagination.total_pages || 1)

						if (goodsList.length < this.pageSize) {
							this.hasMore = false
						}
					} else {
						uni.showToast({
							title: `服务器错误: ${response?.statusCode || '未知'}`,
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载商品错误:', error)
					uni.showToast({
						title: '加载失败: ' + (error.message || '未知错误'),
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 根据商品名称生成图片路径
			getGoodsImagePath(goodName) {
				if (!goodName) return '/static/images/default-goods.png'

				const cleanName = goodName
					.replace(/[<>:"/\\|?*]/g, '')
					.replace(/\s+/g, '')
					.trim()

				if (!cleanName) return '/static/images/default-goods.png'

				return `/static/images/${cleanName}.png`
			},

			// 获取商品图片
			getGoodsImage(item) {
				return item.computedImage || item.image || item.good_image || '/static/images/default-goods.png'
			},

			// 获取好评率
			getReviewRate(item) {
				const rate = item.good_positive_review_rate || item.review_rate || 0
				return (rate * 100).toFixed(1)
			},

			// 格式化销量显示
			formatSales(sales) {
				if (!sales) return '0'
				if (sales > 10000) {
					return (sales / 10000).toFixed(1) + '万'
				}
				return sales.toString()
			},

			// 图片加载错误处理
			onGoodsImageError(item) {
				item.computedImage = '/static/images/default-goods.png'
				this.$forceUpdate()
			},

			onBannerError(index) {
				this.banners[index].image = '/static/images/default-goods.png'
				this.$forceUpdate()
			},

			changeSort(sortType) {
				this.sortBy = sortType
				this.page = 1
				this.hasMore = true
				this.loadHotGoods()
			},

			loadMoreGoods() {
				if (!this.hasMore || this.loading) return
				this.page++
				this.loadHotGoods()
			},

			viewGoodsDetail(goodId) {
				if (!goodId) {
					uni.showToast({
						title: '商品ID无效',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/goods-search/goods-search?good_id=${goodId}`
				})
			},

			navigateToGoodsSearch() {
				uni.navigateTo({
					url: '/pages/goods-search/goods-search'
				})
			},

			navigateToOrderManagement() {
				uni.navigateTo({
					url: '/pages/order-management/order-management'
				})
			},

			navigateToFavorites() {
				uni.navigateTo({
					url: '/pages/favorites/favorites'
				})
			}
		}
	}
</script>

<style scoped>
	.home-container {
		padding-bottom: 120rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		min-height: 100vh;
		position: relative;
	}

	/* 增强版顶部渐变背景 */
	.top-gradient-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		background: linear-gradient(135deg, #6A0DAD 0%, #8A2BE2 30%, #9370DB 70%, #DA70D6 100%);
		z-index: 0;
		overflow: hidden;
	}

	.bg-shape {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float 20s infinite ease-in-out;
	}

	.bg-shape-1 {
		width: 400rpx;
		height: 400rpx;
		top: -200rpx;
		right: -100rpx;
		animation-delay: 0s;
	}

	.bg-shape-2 {
		width: 300rpx;
		height: 300rpx;
		bottom: 100rpx;
		left: -150rpx;
		animation-delay: 5s;
	}

	.bg-shape-3 {
		width: 200rpx;
		height: 200rpx;
		top: 150rpx;
		left: 25%;
		animation-delay: 10s;
	}

	.bg-shape-4 {
		width: 250rpx;
		height: 250rpx;
		bottom: -100rpx;
		right: 25%;
		animation-delay: 15s;
	}

	.bg-shape-5 {
		width: 180rpx;
		height: 180rpx;
		top: 40%;
		left: 15%;
		animation-delay: 20s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg) scale(1);
		}

		33% {
			transform: translateY(-30rpx) rotate(120deg) scale(1.1);
		}

		66% {
			transform: translateY(20rpx) rotate(240deg) scale(0.9);
		}
	}

	/* 轮播图样式 */
	.banner-section {
		padding: 30rpx 30rpx 20rpx;
		position: relative;
		z-index: 1;
	}

	.banner-swiper {
		height: 320rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		position: relative;
	}

	.banner-item {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		transition: transform 0.6s ease;
	}

	.banner-item:active .banner-image {
		transform: scale(1.05);
	}

	.banner-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	}

	/* 快捷导航样式 */
	.quick-nav-section {
		background: rgba(255, 255, 255, 0.95);
		margin: 0 30rpx 30rpx;
		padding: 40rpx 30rpx;
		border-radius: 24rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(20px);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		position: relative;
		z-index: 1;
	}

	.section-header {
		margin-bottom: 40rpx;
	}

	.title-with-line {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.title-line {
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		border-radius: 4rpx;
		margin-right: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(138, 43, 226, 0.4);
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #1e293b;
	}

	.section-subtitle {
		font-size: 26rpx;
		color: #64748b;
		display: block;
	}

	.nav-grid {
		display: flex;
		justify-content: space-around;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		flex: 1;
		transition: all 0.3s ease;
		border-radius: 20rpx;
	}

	.nav-item:active {
		background: rgba(138, 43, 226, 0.05);
		transform: scale(0.95);
	}

	.nav-icon-container {
		position: relative;
		margin-bottom: 20rpx;
	}

	.nav-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 24rpx;
		position: relative;
		z-index: 3;
		transition: all 0.3s ease;
	}

	.nav-icon-bg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		opacity: 0.1;
		z-index: 1;
		transition: all 0.3s ease;
	}

	.nav-icon-hover {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		width: 140rpx;
		height: 140rpx;
		border-radius: 35rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		opacity: 0.05;
		z-index: 2;
		transition: all 0.3s ease;
	}

	.nav-item:active .nav-icon-hover {
		transform: translate(-50%, -50%) scale(1);
	}

	.nav-item:active .nav-icon {
		transform: scale(1.1);
	}

	.nav-text {
		font-size: 28rpx;
		font-weight: 600;
		color: #374151;
	}

	/* 热门商品样式 */
	.hot-goods-section {
		background: rgba(255, 255, 255, 0.95);
		margin: 0 30rpx;
		padding: 40rpx 30rpx;
		border-radius: 24rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(20px);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		position: relative;
		z-index: 1;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 40rpx;
	}

	.title-group {
		flex: 1;
	}

	.sort-options {
		display: flex;
		background: #f8fafc;
		border-radius: 20rpx;
		padding: 6rpx;
		border: 2rpx solid #e2e8f0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.sort-option {
		padding: 14rpx 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #64748b;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}

	.sort-option.active {
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: #fff;
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
	}

	.goods-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
	}

	.goods-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		transition: all 0.4s ease;
		border: 2rpx solid #f1f5f9;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
	}

	.goods-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.goods-item:active {
		transform: translateY(-8rpx);
		box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.15);
		border-color: #8A2BE2;
	}

	.goods-item:active::before {
		transform: scaleX(1);
	}

	.goods-image-container {
		position: relative;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.goods-image {
		width: 100%;
		height: 240rpx;
		border-radius: 16rpx;
		background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		transition: all 0.4s ease;
	}

	.goods-item:active .goods-image {
		transform: scale(1.05);
	}

	.goods-image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.goods-item:active .goods-image-overlay {
		opacity: 1;
	}

	.goods-tag {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: white;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
		z-index: 2;
	}

	.tag-pulse {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background: inherit;
		animation: pulse 2s infinite;
		z-index: -1;
	}

	@keyframes pulse {
		0% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}

		100% {
			transform: translate(-50%, -50%) scale(1.5);
			opacity: 0;
		}
	}

	.goods-hover-effect {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
		border-radius: 16rpx;
	}

	.goods-item:active .goods-hover-effect {
		opacity: 1;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #1e293b;
		margin-bottom: 16rpx;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.price-section {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.goods-price {
		font-size: 32rpx;
		font-weight: 700;
		color: #ff4757;
	}

	.original-price {
		font-size: 24rpx;
		color: #94a3b8;
		text-decoration: line-through;
	}

	.goods-stats {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.stat-icon-wrapper {
		width: 36rpx;
		height: 36rpx;
		border-radius: 8rpx;
		background: rgba(138, 43, 226, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stat-icon {
		font-size: 20rpx;
	}

	.sales,
	.rating {
		font-size: 24rpx;
		color: #64748b;
	}

	/* 加载状态样式 */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 0;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #e2e8f0;
		border-top: 4rpx solid #8A2BE2;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 24rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #64748b;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 0;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 32rpx;
		color: #64748b;
		margin-bottom: 16rpx;
		font-weight: 600;
	}

	.empty-subtext {
		font-size: 26rpx;
		color: #94a3b8;
	}

	/* 加载更多样式 */
	.load-more {
		display: flex;
		justify-content: center;
		padding: 40rpx 0 20rpx;
	}

	.load-more-content {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 20rpx 40rpx;
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(147, 112, 219, 0.05));
		border-radius: 25rpx;
		border: 2rpx solid rgba(138, 43, 226, 0.2);
		transition: all 0.3s ease;
	}

	.load-more-content:active {
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(147, 112, 219, 0.1));
		transform: scale(0.95);
	}

	.load-more-text {
		font-size: 28rpx;
		color: #8A2BE2;
		font-weight: 600;
	}

	.load-more-icon {
		font-size: 24rpx;
		color: #8A2BE2;
		transition: transform 0.3s ease;
	}

	.load-more-content:active .load-more-icon {
		transform: translateY(4rpx);
	}

	/* 底部安全区域 */
	.bottom-safe-area {
		height: env(safe-area-inset-bottom);
	}

	/* 响应式适配 */
	@media (min-width: 768px) {
		.goods-list {
			grid-template-columns: repeat(3, 1fr);
		}

		.nav-grid {
			justify-content: flex-start;
			gap: 40rpx;
		}

		.nav-item {
			flex: none;
			width: 33.33%;
		}
	}
</style>